<template>
	<div class="cate-tab1 swiper">
		<ol class="swiper-wrapper">
			<!-- 计算属性的返回结果【重组的数组】，丢给循环操作 -->
			<li v-for="(list , index) in pages" :key='index.id' class="swiper-slide">
				
				<router-link to="/" v-for="item in list" :key="item.id" class="imgs">
					<img :src="item.imgURL"/>
					<aside>
						<h3>{{item.title}}</h3>
						<label>{{item.msg}}</label>
						<p>￥{{item.price}}起<em>{{item.oldprice}}</em></p>
					</aside>
					
				</router-link>
			</li>
		</ol>
	</div>
</template>

<script>
	import { onMounted } from 'vue';
	
	//引入Swiper的动态组件
	import Swiper , {
		Autoplay,
		EffectCoverflow,
		EffectCube,
		Pagination,
	}from 'swiper';
	
	// //3.swiper组件应用配置
	Swiper.use([Autoplay,EffectCoverflow,EffectCube,Pagination]);
	export default{
		name:'CategoryTab1',
		data(){
			return{
				tab1List : [
					{id:1,imgURL:'tabimg/tab1-1.jpg',title:'广州-丽江 7天跟团游',msg:'含往返飞机票+6晚住宿',price:3493,oldprice:3888},
					{id:2,imgURL:'tabimg/tab1-2.jpg',title:'广州-稻城亚丁 5天跟团游',msg:'含往返飞机票+4晚住宿',price:5677,oldprice:5888},
					{id:3,imgURL:'tabimg/tab1-3.jpg',title:'广州-三亚 5天跟团游',msg:'含往返飞机票(含税)+4晚住宿',price:2500,oldprice:2688},
					{id:4,imgURL:'tabimg/tab1-4.jpg',title:'广州-桂林 9天跟团游',msg:'含单程飞机票单程火车票(含税)+8晚住宿',price:3493,oldprice:3888},
					{id:5,imgURL:'tabimg/tab1-5.jpg',title:'广州-四川 5天跟团游',msg:'特惠立减！宿国际超5星洲际酒店丨峨眉+乐山+都江堰+熊猫乐园丨赠川剧变脸火锅',price:2320,oldprice:2660},
					{id:6,imgURL:'tabimg/tab1-6.jpg',title:'广州-九寨沟 6天跟团游',msg:'自费成都+重庆麻辣双城记|峨眉山+乐山大佛+都江堰洪崖洞|船游夜览两江',price:2980,oldprice:3122},
					{id:7,imgURL:'tabimg/tab1-7.jpg',title:'广州-张家界 4天跟团游',msg:'精致小团｜沱江泛舟｜纯玩一价全含｜高档酒店｜张家界玻璃桥天门山玻璃桥凤凰4日',price:2255,oldprice:2668},
					{id:8,imgURL:'tabimg/tab1-8.jpg',title:'广州-银川 5天跟团游',msg:'塞上江南+大漠长河+千古绝唱+沙坡头+水洞沟+西夏王陵+北堡西部影城宁夏5日',price:3380,oldprice:4880},
				]
			}
		},
		computed:{
			//程序将其当成是属性而不是函数,是个变量 【循环/判断】
			pages(){
				let arr = []; // 空数组，目的是：重组一个二维数组
				let num = 4; //每页条数
				//将原数组遍历
				this.tab1List.forEach((item , index)=>{
					//i:每页的页码
					let i =Math.floor(index / num);
					//将计算的页码放入新数组内,作为下标
					//判断该下标是否也存在
					// if(!arr[i]){
					// 	//第一次出现
					// 	arr[i] = [];
					// 	arr[i].push(item);
						
					// 	}else{
					// 		//已经出现过直接添加
					// 		arr[i].push(item);
					// 	}
					
						if(!arr[i]) arr[i]=[];
						arr[i].push(item);
					
				});
				return arr;
			}
			
		},
		
		setup(){
			onMounted( ()=>{
				new Swiper( '.cate-tab1' , {
					slidesPerView : 1,
				})
			})
		}
	}
</script>

<style scoped>
	.cate-tab1{
		height: 8.8rem;
		
		}
		
	.cate-tab1 ol{
		width: 100%;
		height: 90%;
	}
	.cate-tab1 ol li{
		float: left;
		width: 100%;
		height: 100%;
		
	}
	
	.imgs img{
		width: 100%;
		height: 100%;
		border-radius: 0.3rem;
		margin-top: 0.3rem;
	}
	
	
	
	.cate-tab1 ol li a{
		width: 48%;
		
	}
	
	.cate-tab1 ol li a:nth-child(even){
		width: 48%;
		float: right;
	}
	
	.cate-tab1 ol li a{
		float: left;
	} 
	
	.imgs h3{
		font-weight:bold;
		font-size: 0.1rem;
		padding-top: 0.2rem;
		padding-bottom: 0.1rem;
	}
	.imgs aside label{
		display: block;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		color: rgb(178, 178, 178);
	}
	
	.imgs p{
		padding-top: 0.1rem;
		color: rgb(255, 146, 54);
	}
	
	
	.imgs p em{
		margin: 0 0.2rem 0 0.2rem;
		color: rgb(178, 178, 178);
		text-decoration: line-through;
	}
	
	
</style>
